<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员系统设置</title>
    <!-- 引入 Tailwind CSS -->
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <link rel="stylesheet" href="/static/css/管理员系统设置.css">
</head>

<body class="bg-gray-100">
<!-- 侧边栏 -->
<div class="flex h-screen">
    <div class="sidebar bg-primary-dark text-primary-light w-64 p-4">
        <div class="logo mb-8">
            <h2 class="text-2xl font-bold">管理系统</h2>
        </div>
        <div class="nav-menu space-y-4">
            <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
                <i class="fas fa-shopping-cart mr-3"></i>
                <span><a href="管理员订单管理.html">订单管理</a></span>
            </div>
            <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
                <i class="fas fa-truck mr-3"></i>
                <span><a href="管理员运输管理.html">运输管理</a></span>
            </div>
            <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
                <i class="fas fa-boxes mr-3"></i>
                <span><a href="管理员库存管理.html">库存管理</a></span>
            </div>
            <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
                <i class="fas fa-warehouse mr-3"></i>
                <span><a href="管理员仓库管理.html">仓库管理</a></span>
            </div>
            <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
                <i class="fas fa-users mr-3"></i>
                <span><a href="管理员用户管理.html">用户管理</a></span>
            </div>
            <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer active">
                <i class="fas fa-cog mr-3"></i>
                <span><a href="管理员系统设置.html">系统设置</a></span>
            </div>
        </div>
    </div>
    <!-- 主内容区域 -->
    <div class="flex-1 overflow-y-auto">
        <!-- 头部 -->
        <div class="header bg-white shadow-md p-4 flex justify-between items-center">
            <div class="search-bar relative">
                <input type="text" placeholder="搜索订单、用户..."
                       class="border border-gray-300 rounded p-2 pr-10 w-64 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                <i class="fas fa-search absolute right-3 top-3 text-gray-500"></i>
            </div>
            <div class="user-info flex items-center">
                <img src="/static/img/轮播图图片04.jpg" alt="用户头像" class="rounded-full mr-2 w-8 h-8">
                <span class="font-bold">管理员</span>
            </div>
        </div>
        <!-- 系统设置内容 -->
        <div class="dashboard p-4">
            <h2 class="dashboard-title flex justify-between items-center mb-4 text-xl font-bold">
                <span><i class="fas fa-cog mr-2"></i> 系统设置</span>
            </h2>

            <!-- 系统设置表单 -->
            <form class="system-settings-form bg-white p-4 rounded shadow-md">
                <div class="settings-section mb-6">
                    <h3 class="text-lg font-bold mb-4 flex items-center"><i class="fas fa-globe mr-2"></i> 基本设置</h3>
                    <div class="form-group mb-4">
                        <label for="site-name" class="block text-sm font-medium text-gray-700">网站名称</label>
                        <input type="text" id="site-name" value="物流管理系统"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                    </div>
                    <div class="form-group mb-4">
                        <label for="site-url" class="block text-sm font-medium text-gray-700">网站URL</label>
                        <input type="url" id="site-url" value="https://logistics.example.com"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                    </div>
                    <div class="form-group">
                        <label for="timezone" class="block text-sm font-medium text-gray-700">时区</label>
                        <select id="timezone"
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                            <option value="UTC+8" selected>UTC+8 (中国标准时间)</option>
                            <option value="UTC+0">UTC+0 (格林尼治标准时间)</option>
                            <option value="UTC-5">UTC-5 (东部标准时间)</option>
                        </select>
                    </div>
                </div>

                <div class="settings-section mb-6">
                    <h3 class="text-lg font-bold mb-4 flex items-center"><i class="fas fa-lock mr-2"></i> 安全设置</h3>
                    <div class="form-group mb-4">
                        <label for="login-attempts" class="block text-sm font-medium text-gray-700">最大登录尝试次数</label>
                        <input type="number" id="login-attempts" value="5" min="1" max="10"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                    </div>
                    <div class="form-group mb-4">
                        <label for="session-timeout" class="block text-sm font-medium text-gray-700">会话超时(分钟)</label>
                        <input type="number" id="session-timeout" value="30" min="5" max="240"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                    </div>
                    <div class="form-group">
                        <label class="flex items-center">
                            <input type="checkbox" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <span class="ml-2 text-sm text-gray-700">启用双因素认证</span>
                        </label>
                    </div>
                </div>

                <div class="settings-section mb-6">
                    <h3 class="text-lg font-bold mb-4 flex items-center"><i class="fas fa-bell mr-2"></i> 通知设置</h3>
                    <div class="form-group mb-4">
                        <label class="flex items-center">
                            <input type="checkbox" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <span class="ml-2 text-sm text-gray-700">启用邮件通知</span>
                        </label>
                    </div>
                    <div class="form-group mb-4">
                        <label class="flex items-center">
                            <input type="checkbox" checked class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <span class="ml-2 text-sm text-gray-700">启用短信通知</span>
                        </label>
                    </div>
                    <div class="form-group">
                        <label for="notification-email" class="block text-sm font-medium text-gray-700">通知邮箱</label>
                        <input type="email" id="notification-email" value="admin@example.com"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                    </div>
                </div>

                <div class="settings-section mb-6">
                    <h3 class="text-lg font-bold mb-4 flex items-center"><i class="fas fa-database mr-2"></i> 数据设置</h3>
                    <div class="form-group mb-4">
                        <label for="backup-frequency" class="block text-sm font-medium text-gray-700">备份频率</label>
                        <select id="backup-frequency"
                                class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                            <option value="daily">每日</option>
                            <option value="weekly" selected>每周</option>
                            <option value="monthly">每月</option>
                        </select>
                    </div>
                    <div class="form-group mb-4">
                        <label for="backup-location" class="block text-sm font-medium text-gray-700">备份位置</label>
                        <input type="text" id="backup-location" value="/var/backups"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                    </div>
                    <div class="form-group">
                        <button type="button" class="btn btn-primary-custom inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            <i class="fas fa-download mr-2"></i> 立即备份
                        </button>
                    </div>
                </div>

                <div class="form-actions flex justify-end space-x-4">
                    <button type="submit" class="btn btn-success inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                        <i class="fas fa-save mr-2"></i> 保存设置
                    </button>
                    <button type="reset" class="btn btn-warning inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-yellow-500 hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500">
                        <i class="fas fa-undo mr-2"></i> 重置
                    </button>
                </div>
            </form>
        </div>

        <!-- 系统信息 -->
        <div class="dashboard p-4">
            <h2 class="dashboard-title flex justify-between items-center mb-4 text-xl font-bold">
                <span><i class="fas fa-info-circle mr-2"></i> 系统信息</span>
            </h2>
            <div class="system-info-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <div class="info-card bg-white p-4 rounded shadow-md">
                    <div class="info-icon text-blue-600 mb-2">
                        <i class="fas fa-server text-2xl"></i>
                    </div>
                    <div class="info-content">
                        <h4 class="text-lg font-bold mb-2">服务器信息</h4>
                        <p class="text-sm text-gray-700">操作系统: Linux</p>
                        <p class="text-sm text-gray-700">PHP版本: 8.1.0</p>
                        <p class="text-sm text-gray-700">数据库: MySQL 8.0</p>
                    </div>
                </div>
                <div class="info-card bg-white p-4 rounded shadow-md">
                    <div class="info-icon text-green-600 mb-2">
                        <i class="fas fa-microchip text-2xl"></i>
                    </div>
                    <div class="info-content">
                        <h4 class="text-lg font-bold mb-2">资源使用</h4>
                        <p class="text-sm text-gray-700">CPU使用率: 24%</p>
                        <p class="text-sm text-gray-700">内存使用: 1.2GB/4GB</p>
                        <p class="text-sm text-gray-700">磁盘空间: 45GB/120GB</p>
                    </div>
                </div>
                <div class="info-card bg-white p-4 rounded shadow-md">
                    <div class="info-icon text-red-600 mb-2">
                        <i class="fas fa-shield-alt text-2xl"></i>
                    </div>
                    <div class="info-content">
                        <h4 class="text-lg font-bold mb-2">安全状态</h4>
                        <p class="text-sm text-gray-700">最后扫描: 2023-05-15</p>
                        <p class="text-sm text-gray-700">威胁: 0</p>
                        <p class="text-sm text-gray-700">防火墙: 启用</p>
                    </div>
                </div>
                <div class="info-card bg-white p-4 rounded shadow-md">
                    <div class="info-icon text-yellow-600 mb-2">
                        <i class="fas fa-code-branch text-2xl"></i>
                    </div>
                    <div class="info-content">
                        <h4 class="text-lg font-bold mb-2">版本信息</h4>
                        <p class="text-sm text-gray-700">系统版本: v2.5.1</p>
                        <p class="text-sm text-gray-700">最后更新: 2023-04-28</p>
                        <p class="text-sm text-gray-700">更新可用: 是</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 添加分页栏 -->
        <div class="pagination flex space-x-2 justify-center mb-4">
            <a href="#" class="bg-white p-2 rounded hover:bg-gray-200"><</a>
            <a href="#" class="active bg-blue-500 text-white p-2 rounded">1</a>
            <a href="#" class="bg-white p-2 rounded hover:bg-gray-200">2</a>
            <a href="#" class="bg-white p-2 rounded hover:bg-gray-200">3</a>
            <a href="#" class="bg-white p-2 rounded hover:bg-gray-200"> ></a>
        </div>
    </div>
</div>
</body>

</html>